<template>
	<view class="container">
		<view v-if="currentMes.length" class="plan">
			<image src="/static/travelPlan/plan.png" class='img_top' mode="aspectFill"></image>
			<view class="list">
				<view v-for="item in currentMes" :key="item" @click="toDetail(item)">
					<listItem :detail='item'/>
				</view>
			</view>
		</view>
		<view v-else class="nodata">
			<image src="../../static/img/noplan.png" class='img_top' mode="aspectFill"></image>
			<view class="">暂无行程记录</view>
		</view>
	</view>
</template>

<script>
	import { travelPlanList } from '@/api/travelApi.js'
	import listItem  from './component/listItem.vue'
	export default{
		components:{
			listItem
		},
		data(){
			return{
				currentMes: [],
				isLoadMore: false,
				hasMore: false,
			}
		},
		onLoad() {
			this.getPlanList()
		},
		methods: {
			//h5出待出行详情
			toDetail(item){
				let path = ''
				switch (item.itineraryType){
					case '01':
					path = 'trainDetail'
						break;
					case '02':
					path = 'planeDetail'
						break;
					case '03':
					path = 'hotelDetail'
						break;
				}
				let param = `${path}?orderId=${item.orderId}&orderNo=${item.orderNo}`
				uni.navigateTo({
					url: `/pages/webViewh5/index?path=${encodeURIComponent(param)}`,
				});
			},
			//
			getPlanList(current = 1, append){					
					this.currentMes = []
					let data = {
						isCheckNoItinerary: true,
						pageSize: 10,
						index: current
					}
					travelPlanList({...data}).then(res=>{
						console.log(res)
						if(res[1].respCode === 'FJKBP0000' && res[1].respCode !==null){
							// 加载更多
							if(append){
								this.currentMes = res[1].data && res[1].data.length > 0 ? this.currentMes.concat(res[1].data) : this.currentMes;
								return false;
							} else {
								this.currentMes = res[1].data
							}
							// 判断是否可加载
							this.current += 1
							this.hasMore = (res[1].data.length < 10 && res[1].data.length > 0) ? false : true
							this.isLoadMore = false
						} 
					})
			},
		},
		//上拉触底函数
		onReachBottom(){  
			if(this.hasMore && !this.isLoadMore){  //此处判断，上锁，防止重复请求
						this.isLoadMore = true
						this.getPlanList( parseInt(this.current)+1, true)
			}
		},
	}
</script>

<style lang="scss">
	
	.container{
		position: relative;
		width: 100%;
		.img_top{
			width: 100%;
			height: 282rpx;
		}
		.list{
			position: relative;
			top: -110rpx;
		}
		
	}
</style>